<template>
  <el-table :data="MessageListData" border style="width: 100%" @selection-change="handleSelectionChange">
    <el-table-column type="selection" width="55" fixed />

    <el-table-column prop="username" label="用户名" show-overflow-tooltip align="center" min-width="100" />

    <el-table-column prop="email" label="邮箱" show-overflow-tooltip align="center" min-width="100" />

    <el-table-column prop="message" label="留言内容" show-overflow-tooltip align="center" min-width="100" />

    <el-table-column label="创建时间" align="center" min-width="160">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <el-icon>
            <Timer />
          </el-icon>
          <span style="margin-left: 10px">{{
            dayjs(scope.row.createTime).format('YYYY-MM-DD HH:mm')
          }}</span>
        </div>
      </template>
    </el-table-column>

    <el-table-column label="操作" width="100" align="center" fixed="right">
      <template #default="scope">
        <el-popconfirm title="确定删除吗?" @confirm="handleDelClick(scope.$index, scope.row)">
          <template #reference>
            <el-button size="small" circle :icon="Delete" type="danger"></el-button>
          </template>
        </el-popconfirm>
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup lang="ts">
import { Timer, Delete } from '@element-plus/icons-vue'
import { ref } from 'vue'
import dayjs from 'dayjs';
type messageType = {
  createTime?: string
  message?: string
  email?: string
  username?: string
  _id?: string
}
defineProps<{
  MessageListData: messageType[]
}>()
//  这个是选择中的数据
const multipleSelection = ref<messageType[]>([])
// 每选择一次机会给 multipleSelection数组 加一个数据
const handleSelectionChange = (val: messageType[]) => {
  multipleSelection.value = val
}
const emits = defineEmits(['deleteId'])
const handleDelClick = (index: number, row: messageType) => {
  emits('deleteId', [row._id])
}

defineExpose({ multipleSelection })
</script>